<template>
  <el-card class="point">
    <el-container>
      <el-header style="height:30px;">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ name: 'public' }">公告</el-breadcrumb-item>
          <el-breadcrumb-item>公告列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button type="success" class="add-btn" size="mini" @click="showDialog(0)" plain>添加公告</el-button>
      </el-header>
      <el-main>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="公告id" min-width="100"> </el-table-column>
          <el-table-column prop="title" label="标题" min-width="70"> </el-table-column>
          <el-table-column prop="content" label="内容" min-width="80">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" min-width="100">
            <template v-slot="{ row }">
              {{ row.createTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" min-width="100">
            <template v-slot="{ row }">
              {{ row.createTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="url" label="图片" min-width="80">
            <template v-slot="{ row }">
              <img class="postimg" :src=row.url alt="暂无图片" style="height: auto; width: 100%;">
            </template>
          </el-table-column>
          <el-table-column min-width="100">
            <template slot="header" slot-scope="scope">
              <el-input v-model="keyword" size="mini" placeholder="输入id搜索" :clearable="true"
                @clear="clearIpt(fetchData, scope)">
                <el-button slot="append" icon="el-icon-search" @click="searchData"> </el-button>
              </el-input>
            </template>
            <template slot-scope="{ row }">
              <el-link type="primary" :underline="false" @click="showDialog(1, row)">
                修改公告
              </el-link>
              <el-link type="danger" :underline="false" @click="deleteById($api.deletePublic, fetchData, row.id, '积分')">
                删除公告
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-pagination @size-change="handleSizeChange($event, fetchData)"
        @current-change="handleCurrentChange($event, fetchData)" :page-sizes="[1, 2, 5, 10]"
        layout="total,sizes, prev, pager, next" :total="total">
      </el-pagination>
    </el-container>
    <!-- 弹窗 -->
    <!-- dialog -->
    <el-dialog :title="['添加公告', '修改公告'][this.form.flag]" :visible.sync="dialogFormVisible" width="30%"
      @close="resetForm('form')">
      <el-form :model="form" size="small" ref="form">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" autocomplete="off" maxlength="20" show-word-limit> </el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="form.content" autocomplete="off" maxlength="20" show-word-limit> </el-input>
        </el-form-item>
        <el-form-item prop="url" label="图片">
          <el-upload ref="upload" :file-list="fileList" action="#" list-type="picture-card" :auto-upload="false"
            :on-success="handleSuccessUpload" :on-change="uploadFile">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitDialog('form')" size="small">
          {{ ['添加', '修改'][this.form.flag] }}
        </el-button>
      </div>
    </el-dialog>
  </el-card>
</template>
<script>
import mixins from '@mixins'
import { bindIMG, deepClone } from '@utils'
import { ADD, EDIT } from '@static'
export default {
  data() {
    return {
      tableData: [], // 表格数据
      total: undefined, // 总数
      dialogFormVisible: false, // 控制弹窗显示
      keyword: '', // 搜索关键字
      fileList: [],
      isUpload: false,
      imgUrl: ''
    }
  },
  mixins: [mixins.admin, mixins.home],
  created() {
    this.fetchData()
  },
  methods: {
    bindIMG,
    async fetchData() {
      const res = await this.$api.getPublicPage(this.query)
      console.log(res);
      this.tableData = res.list
      this.total = res.total
    },
    showDialog(flag, data) {
      this.dialogFormVisible = true
      if (flag === ADD) {
        this.form = {}
        this.form.flag = flag
      } else if (flag === EDIT) {
        this.form = deepClone(data)
        this.form.flag = flag
      }
    },
    async submitDialog(formName) {
      this[formName].updateTime = Date.now()
      if (this.isUpload) {
        this[formName].url = this.imgUrl
      }
      this.$refs.upload.submit();
      if (this[formName].flag === ADD) {
        this[formName].createTime = Date.now()
        const { success } = await this.$api.addPublic(this[formName])
        this.handleSuccess(success, '添加公告', this.fetchData)
      } else if (this[formName].flag === EDIT) {
        const { success } = await this.$api.editPublic(this[formName])
        this.handleSuccess(success, '修改公告', this.fetchData)
      }
      this.dialogFormVisible = false
      this.isUpload = false
      this.fetchData()
    },
    handleSuccess(e) {
      console.log(e);
    },
    async searchData() {
      const res = await this.$api.searchPublic({ id: this.keyword })
      const saveData = [];
      saveData.push(res.data)
      this.tableData = saveData
    },
    uploadFile(file) {
      console.log(file);
      this.isUpload = true
      const params = new FormData()
      params.append("xiaohuang", file.raw);
      this.$api.upload(params).then(res => {
        console.log(res)
        this.imgUrl = res
      }).catch(err => {
        console.log(err)
      })
      return true;
    },
  }
}
</script>
<style>
@import '~@css/aCommon.less';

.postimg {
  height: 50px;
  width: 50px;
}
</style>
